<template>
	<view class="container">
		<el-container>
			<el-header class="head">
				<view class="head-left">
				</view>
				<view class="head-right">
					<view class="head-m-btn">
						<image class="head-m-image" src="../../static/gitee.png" mode="" @click="onOpenGitee"></image>
					</view>
				</view>
			</el-header>
		</el-container>
			
		<el-main>
			<el-row :gutter="12">
			  <el-col :span="8" v-for="(item,index) in list" @click.native="onclick(item)">
				<el-card >
					<el-row class="el-card-container" :gutter="12">
					  <el-col :span="9"><div> {{item.name}}</div></el-col>
					  <el-col :span="3" :offset="8"><image class="el-card-container-img" :src="`../../static/icon${index}.png`" mode="" @click="onOpenGitee"></image></el-col>
					</el-row>
				</el-card>
			  </el-col>
			</el-row>
		</el-main>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						name:'BMFont合成',
						url:'/pages/bmfont/bmfont',
						isLink: true
					},
					{
						name:'BMFont生成',
						url:'https://snowb.org/',
						isLink: false
					},
					{
						name:'字符串去重',
						url:'/pages/uniquestr/uniquestr',
						isLink: true
					}
				]
			}
		},
		onLoad() {},
		methods: {
			onclick(item){
				if (item.isLink){
					uni.navigateTo({
						url:item.url
					})
				}else{
					window.open(item.url);
				}
			},
			onOpenGitee(){
				window.open('https://gitee.com/coyeking/tool-library');
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #383b43;
		width: 100%;
		color: #c0c4cc;
	}
	.el-container {
		width: 100%;
		height: 100%;
	}
	.el-main{
		margin: 60px;
	}
	.el-card{
		height: 120px;
		margin-bottom: 20px;
		background-color: #313339;
		border: 1px dashed #d9d9d9;
	}
	
	.el-col :hover{
		background-color: #2d2e34;
	}
	
	.el-card-container{
		color: #d9d9d9;
		line-height: 80px;
		align-items: center;
		display: flex;
		
		
		.el-card-container-img{
			width: 50px;
			height: 50px;
		}
		
	}
	
	.head {
		background: #383b43;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #d9d9d9;
		color: #d9d9d9;
		position: fixed;
		z-index: 99;
		box-sizing: border-box;
		width: 100%;
		.head-left {
		}
		.head-right {
			display: flex;
			.head-m-btn{
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
			
				.head-m-image{
					margin-left: 10px;
					width: 30px;
					height: 30px;
					border-radius: 20px;
				}
			}
		}
	}
	

</style>